<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>grid-metro</title>
    <link rel="stylesheet" href="../../dist/seedsui.min.css">
    <style type="text/css">
    .photo.bordered{
		color:#666;
		background-color:white;
	}
	/*metro风格*/
	.app-metro{
		padding:2px;
	}
	.app-metro:after {
	    display:table;
	    content:'';
	    clear:both;
	    zoom:1;
	}
	.app-metro .sticker{
		top:2px;
		left:2px;
	}
	.app-metro-tip{
		position:absolute;
		right:10px;
		bottom:4px;
		height: 32px;
	    line-height: 32px;
	    width: 32px;
		font-size:18px;
		text-align: right;
		background-color:transparent;
	}
	.app-metro-cell{
		position:relative;
		float:left;
	    box-sizing:border-box;
	    padding:2px;
	}
	.app-metro-cell-inner{
		width: 100%;
    	text-align: center;
		padding:8px 0;
		box-sizing:border-box;
	}
	.description{
        color: #9e9e9e;
        text-align: center;
        height: 32px;
        line-height: 32px;
    }
    </style>
</head>

<body ontouchstart="">
		<header>
		    <div class="titlebar">
		        <a class="titlebar-button" href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
		        <h1 class="titlebar-title">Grid栅格化</h1>
		    </div>
		</header>
		<article>
			<p class="description">Metro风格</p>
			<div class="app-metro">
				<div class="app-metro-cell" style="width:60%;">
					<a class="app-metro-cell-inner bg-1">
						<span class="sticker top left"><span>NEW</span></span>
						<i class="icon icon-contact-fill size40"></i>
						<span class="app-metro-tip">3</span>
						<p class="nowrap" style="margin-top:10px;">通讯录</p>
					</a>
				</div>
				<div class="app-metro-cell" style="width:40%;">
					<a class="app-metro-cell-inner bg-2">
						<i class="icon icon-write-fill size40"></i>
						<p style="margin-top:10px;">审批</p>
					</a>
				</div>
				<div class="app-metro-cell" style="width:40%;">
					<a class="app-metro-cell-inner bg-3">
						<i class="icon icon-position-fill size40"></i>
						<p style="margin-top:10px;">定位</p>
					</a>
				</div>
				<div class="app-metro-cell" style="width:60%;">
					<a class="app-metro-cell-inner bg-4">
						<i class="icon icon-gear-fill size40"></i>
						<p style="margin-top:10px;">设置</p>
					</a>
				</div>
			</div>

			<p class="description">Metro风格-复杂布局</p>
			<div class="app-metro" style="height:212px;">
				<div class="app-metro-cell" style="width:50%;">
					<div class="app-metro-cell-inner box box-middlecenter box-vertical bg-1" style="height:208px;">
						<p style="font-size: 50px;">300</p>
						<p style="opacity: 0.7;">您的积分</p>
						<p style="position: absolute;right:10px;bottom:10px;text-align: right;">小明，欢迎您</p>
					</div>
				</div>
				<div class="app-metro-cell" style="width:50%;padding:0;height:212px;">
					<div class="app-metro-cell" style="width:100%;">
						<div class="app-metro-cell-inner bg-2" style="padding:8px;height:118px;">
							<div class="text-left" style="height:32px;line-height:32px;border-bottom: 1px solid #fff;">
								资料1
							</div>
							<div class="text-left" style="height:32px;line-height:32px;border-bottom: 1px solid #fff;">
								资料2
							</div>
							<div style="padding:8px 0;text-align: right;">
								<a style="color:white;">更多资料...</a>
							</div>
						</div>
					</div>
					<div class="app-metro-cell" style="width:50%;">
						<a class="app-metro-cell-inner bg-3" style="height:86px;">
							<i class="icon icon-contact-fill size40"></i>
							<p class="nowrap" style="margin-top:10px;">海关警员</p>
						</a>
					</div>
					<div class="app-metro-cell" style="width:50%">
						<a class="app-metro-cell-inner bg-4" style="height:86px;">
							<i class="icon icon-write-fill size40"></i>
							<p class="nowrap" style="margin-top:10px;">电子书</p>
						</a>
					</div>
				</div>
				<div class="app-metro-cell" style="width:50%">
					<a class="app-metro-cell-inner bg-5">
						<i class="icon icon-chartpie-fill size40"></i>
						<p class="nowrap" style="margin-top:10px;">岗位练兵</p>
					</a>
				</div>
				<div class="app-metro-cell" style="width:25%">
					<a class="app-metro-cell-inner bg-6">
						<i class="icon icon-write-fill size40"></i>
						<p class="nowrap" style="margin-top:10px;">在线问卷</p>
					</a>
				</div>
				<div class="app-metro-cell" style="width:25%">
					<a class="app-metro-cell-inner bg-7">
						<i class="icon icon-position-fill size40"></i>
						<p class="nowrap" style="margin-top:10px;">在线提问</p>
					</a>
				</div>
				<div class="app-metro-cell" style="width:25%">
					<a class="app-metro-cell-inner bg-8">
						<i class="icon icon-chartpie-fill size40"></i>
						<p class="nowrap" style="margin-top:10px;">岗位练兵</p>
					</a>
				</div>
				<div class="app-metro-cell" style="width:25%">
					<a class="app-metro-cell-inner bg-9">
						<i class="icon icon-rdoquestion-fill size40"></i>
						<p class="nowrap" style="margin-top:10px;">在线问卷</p>
					</a>
				</div>
				<div class="app-metro-cell" style="width:50%">
					<a class="app-metro-cell-inner bg-10">
						<span class="app-metro-tip">3</span>
						<i class="icon icon-chat-fill size40"></i>
						<p class="nowrap" style="margin-top:10px;">消息推送</p>
					</a>
				</div>
			</div>
		</article>
    <script src="../../dist/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
	<script>
		//定义exmobi返回
		function back(){history.go(-1);}
	</script>
</body>
</html>
